<template>
  <view class="w-full h-full bg-white flex flex-col">
    <!-- 顶部 Tabs -->
    <view class="w-full bg-[#3ea0ff] text-white flex">
      <view
        class="flex-1 text-center py-4 text-lg font-semibold"
        :class="activeTab === 'help' ? 'border-b-4 border-white' : ''"
        @click="onChangeTab('help')"
      >
        帮扶记录
      </view>
      <view
        class="flex-1 text-center py-4 text-lg font-semibold"
        :class="activeTab === 'donation' ? 'border-b-4 border-white' : ''"
        @click="onChangeTab('donation')"
      >
        捐赠记录
      </view>
    </view>

    <!-- 列表内容 -->
    <scroll-view scroll-y class="flex-1">
      <view v-if="activeTab === 'help'" class="p-4">
        <view
          v-for="(item, index) in helpList"
          :key="index"
          class="flex flex-col items-start mb-[20rpx] w-[100%] h-[auto] rounded mt-2 bg-[#ffffff]"
        >
          <view
            v-if="item.rescueImg.length > 0"
            class="w-[100%] h-[300rpx] rounded-tl rounded-tr"
          >
            <image
              v-for="(img, index) in item.rescueImg"
              :key="index"
              class="h-[300rpx]"
              :src="img"
              :style="{ width: `${100 / item.rescueImg.length}%` }"
              mode="scaleToFill"
            />
          </view>
          <view
            class="mt-2 px-2 text-f h-[150rpx] w-[100%] py-2 flex space-between"
          >
            <view class="w-[77%] flex flex-col space-between">
              <text class="font-blod text-[40rpx]">{{ item.name }}</text>
              <text class="text-[26rpx] text-[#a1a8b0]">{{
                item.address
              }}</text>
              <text class="text-[26rpx] text-[#a1a8b0]"
                >{{ item.count }}人已参加</text
              >
            </view>
            <view
              class="bg-[#317fec] w-[120rpx] h-[120rpx] flex flex-col justify-center items-center text-[#fff] rounded-[30rpx]"
            >
              <text>{{ dayjs(item.endTime).month() + 1 }}月</text>
              <text>{{ dayjs(item.endTime).date() }}日</text>
            </view>
          </view>
        </view>
      </view>

      <view v-else class="p-4">
        <view
          v-for="(item, index) in donationList"
          :key="index"
          class="py-4 border-b border-gray-200"
        >
          <view class="bg-white rounded-xl shadow-sm flex items-start">
            <image
              :src="
                item.materialImg ??
                'https://imgservice.suning.cn/uimg1/b2c/image/p-_tBk2Q5xzEMDONkIdFWw.jpg_800w_800h_4e'
              "
              class="w-[180rpx] h-[240rpx] rounded-l-lg object-cover"
              mode="aspectFill"
            />
            <view class="flex-1 p-6 pl-8">
              <view class="text-base font-semibold text-[#0f3a80] ml-2">{{
                item.donateTitle
              }}</view>
              <view class="text-xs text-gray-500 mt-2 ml-2 line-clamp-2">{{
                item.materialName
              }}</view>
              <view class="w-full flex items-center justify-between mt-4 ml-2">
                <view
                  v-for="tag in item.materialTag.split(',')"
                  :key="tag"
                  class="text-xs px-2 py-0.5 rounded-full bg-[#f0f8ff] text-[#2469ff]"
                  >#{{ tag }}</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getRescueRecordList } from '@/api/rescue.api'
import { getDonateRecordList } from '@/api/donate.api'

import dayjs from 'dayjs'
const user = uni.getStorageSync('user')

const activeTab = ref('help')

const helpList = ref<RescueInfo[]>([])
const donationList = ref<DonateRecord[]>([])

const getRescue = async () => {
  const res = await getRescueRecordList<
    {
      page: number
      pageSize: number
      userId: number
    },
    RescueInfo
  >({
    page: 1,
    pageSize: 10,
    userId: user.id
  })
  if (res.code === 200) {
    helpList.value = res.data.items || []
  }
}

const getDonate = async () => {
  const res = await getDonateRecordList<
    {
      page: number
      pageSize: number
      userId: number
    },
    DonateRecord
  >({
    page: 1,
    pageSize: 10,
    userId: user.id
  })
  if (res.code === 200) {
    donationList.value = res.data.items || []
  }
}

const onChangeTab = async (tab: string) => {
  // 切换tab并且数组为空时发起请求
  if (tab === activeTab.value) {
    return
  }
  activeTab.value = tab
  if (tab === 'help') {
    if (helpList.value.length === 0) {
      await getRescue()
    }
  } else {
    if (donationList.value.length === 0) {
      await getDonate()
    }
  }
}

onMounted(async () => {
  await getRescue()
})
</script>

<style>
/* 可以根据需要扩展页面样式 */
</style>
